<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<!--  <meta name="viewport" content="width=device-width, initial-scale=0.0,user-scalable=0">-->
<!--  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />-->
<!--  <meta name="viewport" content="width=device-width, initial-scale=1">-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


  <title>WebSocket Demo</title>
</head>
<body>
<h2>WebSocket Test</h2>
<div>
  <input type="text" id="messageInput" placeholder="Enter message"/>
  <button onclick="()">Send</button>
  <button onclick="like()">like</button>
  <button onclick="unlike()">unlike</button>
  <button onclick="getpre()">getpre</button>
  <button onclick="getnext()">getnext</button>
  <button onclick="autoroll()">autoroll</button>
  <button onclick="shutdown()">shutdown</button>
</div>
<div id="messages"></div>
<div id="contents"></div>

<script>
  // if ("WebSocket" in window) {
  //   alert("您的浏览器支持 WebSocket!");
  // } else {
  //   alert("您的浏览器不支持 WebSocket!");
  // }

  class HashTableMap {
    constructor() {
      this.table = new Map(); // 使用 Map 存储键值对
    }

    // 添加或更新键值对
    set(key, value) {
      this.table.set(key, value);
    }

    // 根据键获取值
    get(key) {
      return this.table.get(key);
    }

    // 根据键删除值
    remove(key) {
      this.table.delete(key);
    }
  }
  const htMap = new HashTableMap();

  var ws;
  var reconnectInterval = 2000; // 重连间隔时间（毫秒）
  function connect() {
    // 连接到WebSocket服务器
    ws = new WebSocket("ws://localhost:8080/MWS");

    ws.onopen = function() {
      console.log("Connected to WebSocket server.");
    };

    ws.onmessage = function(event) {
      // 在收到消息时调用
      console.log("Received: " + event.data);

      var num = JSON.parse(event.data)

      document.getElementById("messages").innerHTML = '<p>' +  num.like + '</p>';
      document.getElementById("contents").innerHTML = '<p>' +  num.contents + '</p>';

    };

    ws.onclose = function() {
      console.log("Disconnected from WebSocket server.");
      setTimeout(connect, reconnectInterval);
    };

    ws.onerror = function(error) {
      console.log("WebSocket Error: " + error);
    };
  }

  function sendMessage() {
    var message = document.getElementById("messageInput").value;
    if (ws) {
      ws.send(message);
      console.log("Sent: " + message);
    } else {
      console.log("WebSocket connection is not established.");
    }
  }

  function like()
  {
    if (ws) {
      const data = {  type: "1" };
      ws.send(JSON.stringify(data));
      console.log("Sent: " +JSON.stringify(data) );
    } else {
      console.log("WebSocket connection is not established.");
    }
  }

  function unlike()
  {
    if (ws) {
      const data = { name: "John", type: "2" };
      ws.send(JSON.stringify(data));
      console.log("Sent: " +JSON.stringify(data) );
    } else {
      console.log("WebSocket connection is not established.");
    }
  }
  function getnext()
  {
    if(ws)
    {
      const data = { type: "3" };
      ws.send(JSON.stringify(data));
      console.log("Sent: " +JSON.stringify(data) );
    }
  }

  function getpre()
  {
    if(ws)
    {
      const data = { type: "4" };
      ws.send(JSON.stringify(data));
      console.log("Sent: " +JSON.stringify(data) );
    }
  }
  function autoroll()
  {
    if(ws)
    {
      const data = { type: "5" };
      ws.send(JSON.stringify(data));
      console.log("Sent: " +JSON.stringify(data) );
    }
  }
  function shutdown()
  {
    if(ws)
    {
      const data = { type: "6" };
      ws.send(JSON.stringify(data));
      console.log("Sent: " +JSON.stringify(data) );
    }
  }

  // 页面加载完毕后连接WebSocket
  window.onload = function() {
    connect();
  };


</script>
</body>
</html>
